<!-- Site Setting Panel -->
  <section id="settings" data-ng-include=" 'views/settings/settings.html' " style="display:none"></section>
<!-- Site Setting Panel End -->

<!-- Page Header Start -->
<div class="pageheader">
  <h2><i class="fa fa-check"></i> Form Elements </h2>
  <div class="breadcrumb-wrapper hidden-xs"> <span class="label">You are here:</span>
    <ol class="breadcrumb">
      <li> <a href="index.html"> Home </a> </li>
      <li class="active"> Form Elements </li>
    </ol>
  </div>
</div>
<!-- Page Header End -->

<div class="page">

  <div class="row">
    <div class="col-md-6">
      <div class="panel panel-default">
        <h4 class="nm pad-15"> Bootstrap <strong> Basic Form</strong> </h4>
        <div class="panel-body">
          <div class="row">
            <div class="col-md-8 col-md-offset-2">
              <form role="form">
                <div class="form-group">
                  <label for="exampleInputEmail1">Email address</label>
                  <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                </div>
                <div class="form-group">
                  <label for="exampleInputPassword1">Password</label>
                  <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                </div>
                <div class="checkbox">
                  <label>
                    <input type="checkbox">
                    Check me out </label>
                </div>
                <button type="submit" class="btn btn-primary btn-w-md">Submit</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-6">
      <div class="panel panel-default">
        <h4 class="nm pad-15"> Bootstrap <strong> Horizontal Form </strong> </h4>
        <div class="panel-body">
          <div class="row">
            <div class="col-md-10 col-sm-offset-1">
              <form class="form-horizontal" role="form">
                <div class="form-group">
                  <label for="inputEmail3" class="col-sm-3 control-label">Email</label>
                  <div class="col-sm-9">
                    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                  </div>
                </div>
                <div class="form-group">
                  <label for="inputPassword3" class="col-sm-3 control-label">Password</label>
                  <div class="col-sm-9">
                    <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-sm-offset-2 col-sm-10">
                    <div class="checkbox">
                      <label>
                        <input type="checkbox">
                        Remember me </label>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-success btn-w-md">Sign in</button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    
  </div>

  <div class="row">
    <div class="col-md-12">
      <div class="panel panel-default">
        <h4 class="nm pad-15"> Bootstrap <strong> Inline Form </strong> </h4>
        <div class="panel-body">
          <div class="row">
            <div class="col-md-12 center">
              <form class="form-inline" role="form">
                <div class="form-group">
                  <label class="sr-only" for="exampleInputEmail2">Email address</label>
                  <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
                </div>
                <div class="form-group">
                  <label class="sr-only" for="exampleInputPassword2">Password</label>
                  <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
                </div>
                <div class="checkbox">
                  <label>
                    <input type="checkbox">
                    Remember me </label>
                </div>
                <button type="submit" class="btn btn-info btn-w-md">Sign in</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-12">
      <div class="panel panel-default">
        <h4 class="nm pad-15"> Bootstrap <strong> Column Sizing </strong> </h4>
        <div class="panel-body">
          <div class="form-group">
            <div class="row">
              <div class="col-sm-1">
                <input type="text" class="form-control col-sm-1" placeholder="col-sm-1">
              </div>
              <div class="col-sm-11">
                <input type="text" class="form-control col-sm-11" placeholder="col-sm-11">
              </div>
            </div>
            <div class="divider"></div>
            <div class="row">
              <div class="col-sm-2">
                <input type="text" class="form-control col-sm-2" placeholder="col-sm-2">
              </div>
              <div class="col-sm-10">
                <input type="text" class="form-control col-sm-10" placeholder="col-sm-10">
              </div>
            </div>
            <div class="divider"></div>
            <div class="row">
              <div class="col-sm-3">
                <input type="text" class="form-control col-sm-3" placeholder="col-sm-3">
              </div>
              <div class="col-sm-9">
                <input type="text" class="form-control col-sm-9" placeholder="col-sm-9">
              </div>
            </div>
            <div class="divider"></div>
            <div class="row">
              <div class="col-sm-4">
                <input type="text" class="form-control col-sm-4" placeholder="col-sm-4">
              </div>
              <div class="col-sm-8">
                <input type="text" class="form-control col-sm-8" placeholder="col-sm-8">
              </div>
            </div>
            <div class="divider"></div>
            <div class="row">
              <div class="col-sm-5">
                <input type="text" class="form-control col-sm-5" placeholder="col-sm-5">
              </div>
              <div class="col-sm-7">
                <input type="text" class="form-control col-sm-7" placeholder="col-sm-7">
              </div>
            </div>
            <div class="divider"></div>
            <div class="row">
              <div class="col-sm-6">
                <input type="text" class="form-control col-sm-6" placeholder="col-sm-6">
              </div>
              <div class="col-sm-6">
                <input type="text" class="form-control col-sm-6" placeholder="col-sm-6">
              </div>
            </div>
            <div class="divider"></div>
            <div class="row">
              <div class="col-sm-7">
                <input type="text" class="form-control col-sm-7" placeholder="col-sm-7">
              </div>
              <div class="col-sm-5">
                <input type="text" class="form-control col-sm-5" placeholder="col-sm-5">
              </div>
            </div>
            <div class="divider"></div>
            <div class="row">
              <div class="col-sm-8">
                <input type="text" class="form-control col-sm-8" placeholder="col-sm-8">
              </div>
              <div class="col-sm-4">
                <input type="text" class="form-control col-sm-4" placeholder="col-sm-4">
              </div>
            </div>
            <div class="divider"></div>
            <div class="row">
              <div class="col-sm-9">
                <input type="text" class="form-control col-sm-9" placeholder="col-sm-9">
              </div>
              <div class="col-sm-3">
                <input type="text" class="form-control col-sm-3" placeholder="col-sm-3">
              </div>
            </div>
            <div class="divider"></div>
            <div class="row">
              <div class="col-sm-10">
                <input type="text" class="form-control col-sm-10" placeholder="col-sm-10">
              </div>
              <div class="col-sm-2">
                <input type="text" class="form-control col-sm-2" placeholder="col-sm-2">
              </div>
            </div>
            <div class="divider"></div>
            <div class="row">
              <div class="col-sm-11">
                <input type="text" class="form-control col-sm-11" placeholder="col-sm-11">
              </div>
              <div class="col-sm-1">
                <input type="text" class="form-control col-sm-1" placeholder="col-sm-1">
              </div>
            </div>
            <div class="divider"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
</div>